<!-- <template>
    <div id="baobao">
        <section class="top">

            <h1>
                <img src="../../assets/baobao.png" alt="">
            </h1>
        </section>
        <nav>
            <h2>
                <img src="../../assets/xianshidija.png" alt="">
            </h2>
            <van-tabs class="navv" v-model="active" background='transparent' color='#fff' title-inactive-color='#fff'
                title-active-color='#fff' line-width='.18rem'>
                <van-tab title="正在抢购"></van-tab>
                <van-tab title="上新预购"></van-tab>
            </van-tabs>
        </nav>
        <div class="center">
            <ul>
                <li v-for="(item,index) in active==0?zhengzai:shangxin" :key='index'>
                    <h2>
                        <img :src="item.picture" alt="">
                    </h2>
                    <div class="content">
                        <h3>{{item.name}}</h3>
                        <p>爆爆团价</p>
                        <h4><em>￥</em><span>{{item.min_price}}</span><b
                                v-show="item.promotion_info!=''">{{item.promotion_info}}</b></h4>
                        <div>马上抢</div>
                        <article>已售{{item.month_saled}}份</article>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script >
import { getBaoListData } from '@/api/baobao'
export default {
    data() {
        return {
            active: 0,
            zhengzai: [],
            shangxin: []

        };
    },
    mounted() {
        getBaoListData({ status: 0 }).then((res) => {//正在抢购
            this.zhengzai = res.data.list
            console.log(this.zhengzai);
        }),
            getBaoListData({ status: 1 }).then((res) => {
                this.shangxin = res.data.list;
                console.log(this.shangxin);
            });
    },
    methods: {
        onClick() {
            console.log("945841");

        }
    },
    updated() {
        console.log(this.active);
    },
}
</script>
<style scoped lang="scss">
#baobao {
    flex: 1;
    width: 100%;
   // height: 100%;
    background-color: rgb(245, 245, 245);

    img {
        width: 100%;
    }

    .top {
        width: 100%;
        height: 0.43rem;
        background-color: rgb(255, 0, 0);
        overflow: hidden;
        padding: 0 .12rem;

        h1 {

            margin: 0 auto;
            margin-top: .10rem;
            width: .7rem;
        }

        .operate {
            margin-top: .07rem;
            float: right;
            width: .78rem;
            height: .3rem;
            background-color: rgba(0, 0, 0, 0.156);
            // border: .01rem solid rgb(240, 240, 240);
            border-radius: .15rem;
            color: rgb(255, 255, 255);
            display: flex;
            align-items: center;
            justify-content: center;
        }


    }

    nav {
        height: 1.8rem;
        background-image: linear-gradient(red, rgb(254, 177, 12));
        padding-top: .3rem;

        h2 {
            width: 2.68rem;
            margin: 0 auto;
        }

        .navv {
            width: 1.5rem;
            margin-top: .2rem;
        }
    }

    .center {
        position: relative;

        ul {
            width: 3.5rem;
            position: absolute;
            top: -.4rem;

            li {
                width: 100%;
                height: 1.5rem;
                background-color: #fff;
                border-radius: .1rem;
                margin-bottom: .1rem;
                display: flex;
                padding: .12rem;

                h2 {
                    width: 1.24rem;
                    height: 1.24rem;
                }

                .content {
                    padding-left: .05rem;
                    position: relative;
                    flex: 1;

                    h3 {
                        font-size: .16rem;
                        font-weight: 700;
                    }

                    p {
                        font-size: .12rem;
                        color: rgb(254, 124, 108);
                        margin: .1rem 0 .05rem;
                    }

                    h4 {
                        margin: .1rem 0 .05rem;
                        color: rgb(254, 124, 108);

                        em {
                            font-size: .12rem;
                        }

                        span {
                            font-weight: 700;
                        }

                        b {
                            font-size: .12rem;
                            margin-left: .05rem;
                            border: 0.01rem solid rgb(254, 124, 108);
                            padding: .02rem;
                            border-radius: .05rem;
                        }
                    }

                    h6 {
                        font-size: .12rem;
                        color: rgb(196, 196, 196);
                        text-decoration: line-through;
                    }

                    div {
                        width: .76rem;
                        height: .33rem;
                        color: #fff;
                        background-color: rgb(255, 67, 0);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: absolute;
                        right: .1rem;
                        bottom: .3rem;
                        border-radius: .33rem;
                    }

                    article {
                        width: .76rem;
                        position: absolute;
                        right: .1rem;
                        bottom: .1rem;
                        font-size: .12rem;
                        text-align: center;
                        color: rgb(254, 124, 108);
                    }
                }
            }
        }

    }
}
</style> -->
     <!-- <h6>￥{{(item.min_price/1)*(item.promotion_info=NaN?1:parseFloat(item.promotion_info))}}</h6> -->
     <template>
        <div>
          <div class="tu">
            <img class="img" src="../../assets/baobaotuan.gif" alt="" />
            <div class="left" @click="qianggou"></div>
            <div class="right" @click="shangxin"></div>
          </div>
          <router-view></router-view>
        </div>
      </template>
      
      <script>
      export default {
        methods: {
          qianggou() {
            this.$router.push("/tuan/baotuan/qianggou");
          },
          shangxin() {
            this.$router.push("/tuan/baotuan/shangxin");
          },
        },
      };
      </script>
      
      <style lang="scss">
      .tu {
        position: relative;
        img {
          width: 100%;
        }
        .left {
          width: 80px;
          height: 35px;
          background-color: transparent;
          position: absolute;
          bottom: 10px;
          z-index: 999;
        }
        .right {
          width: 80px;
          height: 35px;
          background-color: transparent;
          position: absolute;
          bottom: 10px;
          left: 90px;
        }
      }
      </style>